<script setup>
import { reactive, computed } from "vue";
import { useRouter, useRoute } from "vue-router";

let router = useRouter();
let route = useRoute();
let data = reactive({ drawer: true });

// 获取路由列表
const routes = computed(() => router.getRoutes());
console.log(routes.value);

// 获取路由的 path 和 meta.label
const routePathsAndLabels = computed(() => {
  return routes.value.map((item) => ({
    path: item.path,
    label: item.meta.label,
    isActive: item.path === route.path, // 默认不激活
  }));
});

// 监听路由变化，更新激活状态
router.afterEach((to, from) => {
  routePathsAndLabels.value.forEach((r) => {
    r.isActive = to.path === r.path;
  });
});
</script>

<template>
  <div class="l-home">首页</div>
</template>

<style lang="scss" scoped></style>
